<!--
 * @Author: 周艳凯 484894717@qq.com
 * @Date: 2025-03-18 09:40:22
 * @LastEditors: 周艳凯 484894717@qq.com
 * @LastEditTime: 2025-04-01 15:21:51
 * @FilePath: \BusStopBoard.Webd:\360MoveData\Users\75041\Desktop\uniapp框架\my-project\src\pages\index\line.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <view class="text">
        <view class="list">
            <view class="li-left">
                <view class="li-l-t">
                    {{ items.name }}
                </view>
                <view class="leavefor">开往 </view>
                <view class="leaverName">
                    {{ lastPointName }}
                </view>

                <view class="firstflight">
                    <view>首班
                        {{ formatTime(items.lineFristTime, 'HH:mm') }}
                    </view>
                    <view>末班
                        {{ formatTime(items.lineLastTime, 'HH:mm') }}
                    </view>
                </view>
            </view>
            <!-- <view class="li-center"> -->
            <!-- <view class="li-c-box">
                    <view v-if="items.lineNodeList" class="line">
                        <view class="doc" v-for="(item, index) in items.lineNodeList" :key="item.id">
                            <view :class="[
                                'docs',
                                {
                                    active: current == index,
                                },
                            ]">
                                <image class="gongjiao" v-if="currents == index" src="@/static/gongjiao.png"></image>
                            </view>
                        </view>
                        <view class="lines"></view>
                    </view>
                    <view v-if="items.lineNodeList" class="boda">
                        <view v-for="(item, index) in items.lineNodeList" :key="item.id" :class="[
                            'li-c-b-l',
                            {
                                actives: current == index,
                            },
                        ]">
                            <view class="texts"> {{ item.pointName }}</view>
                        </view>
                    </view>
                </view>
                <view class="arrow">
                    <view class="right-arrow"> </view>
                </view> -->
            <swopers :items="items" :current="current" :currents="currents"></swopers>
            <!-- </view> -->
            <view class="li-right">
                <view>{{ lastNaem }} </view>
                <!-- <view>{{ lastZhan }} </view> -->
            </view>
        </view>
    </view>
</template>

<script>
import swopers from '../index/modules/swiperLine.vue'
import dayjs from 'dayjs';
import customParseFormat from 'dayjs/plugin/customParseFormat';
import { mapGetters } from 'vuex';
dayjs.extend(customParseFormat);

export default {
    components: {
        swopers
    },
    props: {
        items: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            lastZhan: '等待发车',
            lastNaem: "等待发车",
            currents: undefined
        };
    },
    computed: {
        lastPointName() {
            return this.items.lineNodeList?.slice(-1)[0]?.pointName || '未知站点';
        },
        ...mapGetters({
            // 假设Vuex store中有一个名为'myData'的状态
            myGetterData: 'getreceiveUserName',
        }),
        current() {
            const { pointName: targetName = '', lineNodeList: nodeList = [] } = this.items || {};

            // 空值快速返回
            if (!targetName || nodeList.length === 0) return -1;

            // 精确查找逻辑
            return nodeList.findIndex((item) => item?.pointName === targetName);
        },
    },
    watch: {
        myGetterData(newVal) {
            // 当myGetterData变化时执行的逻辑

            const dataArray = newVal.lineIds.split(',')
            const dataName = newVal.message.split('|')
            const dataindexs = newVal.indexs.split(',')
            // console.log(newVal, '我是谁谁谁')
            const index = dataArray.indexOf(this.items.code);

            if (index !== -1) {
                // console.log(`找到了字符串，位置在：${index}`, dataName[index]);
                const inputString = dataName[index]
                const regex = /(\d+)距本站(\d+)站/;
                const match = inputString.match(regex); // 使用match方法匹配正则表达式              
                // 但对于你的实际需求，可能你需要的是这样的逻辑（假设输入格式固定为"XXX距本站YYY站"）：
                // const regexForActualUse = /距本站(\d+)站/; // 正则表达式，用于匹配"距本站"和"站"之间的数字
                // const matchForActualUse = inputString.match(regexForActualUse);
                // if (matchForActualUse) {
                //     console.log("距本站和站之间的数字是：", matchForActualUse[1]); // 输出18
                //     console.log(inputString,this.items.code,'我是当前的数据'); // 输出18
                //     this.lastZhan = matchForActualUse[1]+'站'
                // } else {
                //     // console.log("未找到距本站和站之间的数字");
                // }
                if (match) {
                    // 提取并输出匹配的数字，但注意这里的逻辑需要调整以适应实际字符串格式
                    // 因为在这个例子中，"706"和"18站"之间并没有额外的数字
                    // 所以这里我们假设要提取的是"706"这样的格式（即前面的数字），但实际应用中需要调整
                    // console.log("提取的数字是：", match); // 这里的match[1]会匹配到第一个(\d+)即前面的数字706
                    this.lastNaem = inputString
                    // this.lastZhan = match[2] + '站'
                    // console.log(dataindexs,index,'我查找索引去了')
                    this.currents = this.current - dataindexs[index]
                    // console.log(this.items, '当前站点:', this.items.name, '当前站的索引', this.current, '公交车' + match[1], '距离本站:', match[2])
                    // 注意：如果要在"距本站"前后提取数字，正则表达式需要相应调整
                    // 例如，要提取"距本站"前的数字，可以使用：/(\d+)(?=距本站)/
                    // 要提取"距本站"和"站"之间的数字，可以使用：/距本站(\d+)站/
                } else {
                    console.log("未找到匹配的数字");
                }
            } else {
                console.log("未找到字符串");
            }
            // console.log('myGetterData changed from', newVal);
        },
    },
    methods: {
        formatTime(time, format) {
            return dayjs(time, 'HH:mm').format(format);
        },
    },
};
</script>

<style lang="scss" scoped>
.text {
    width: 100%;
    // max-height: 155rpx;
    height: 215rpx;
    // max-height: 180rpx;
    overflow: hidden;
    margin-bottom: 2rpx;
    font-size: 30rpx;
    color: #a0e4fe;
    text-align: center;
    background-image: linear-gradient(to bottom, #024ad0 45%, #0b138b 100%);
}

.list {
    display: flex;
    height: 100%;
    font-size: 18rpx;
    color: #fff;
    text-align: left;
}

.li-left {
    width: 120rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .leaverName {
        font-size: 16rpx;
    }

    .firstflight {
        font-size: 16rpx;
    }

    .li-l-t {
        width: 100%;
    }

    .leavefor {
        color: red;
        font-size: 16rpx;
    }
}

.li-left,
.li-right {
    // width: 140rpx;
    padding: 6rpx 4rpx;
    text-align: center;
    background-color: #ffae00;
}

.li-right {
    width: 120rpx;
}

.li-center {
    position: relative;
    flex: 1;
    padding: 0 12rpx;
    overflow: hidden;
}

.li-c-box {
    position: relative;
    margin-top: 20rpx;

    /* display: flex; */
    .doc {
        display: flex;
    }

    .boda {
        display: flex;
        justify-content: space-between;
        margin-top: 8rpx;
    }

    .line {
        position: relative;
        z-index: 1;
        display: flex;
        justify-content: space-between;
        width: 100%;

        // .docCon{
        //     flex: 1;
        //     display: flex;
        //     justify-content: center;
        //     align-items: center;
        // }

        .doc {
            display: flex;
            align-items: center;
            justify-content: center;

            /* position: relative;
            left: 2rpx;
            width: 6rpx;
            height: 6rpx;
            border-radius: 50%;
            background-color: #ffffff; */
            width: 10rpx;

            .active {
                /* background: red; */
                animation: dot-flash 1s infinite;
            }

            .docs {
                position: relative;
                /* position: relative; */
                /* left: 2rpx; */
                width: 6rpx;
                height: 6rpx;
                background-color: #fff;
                border-radius: 50%;

                .gongjiao {
                    position: absolute;
                    width: 20rpx;
                    height: 20rpx;
                    top: -20rpx;
                    left: 0rpx;
                }
            }
        }

        .lines {
            position: absolute;
            top: 1.5rpx;
            right: 4rpx;

            /* width: 100%; */
            left: 4rpx;
            z-index: -1;
            height: 3rpx;
            background-color: #77c763;
            border-radius: 4rpx;
        }
    }

    .li-c-b-l {
        // width: 20px;
        // height: 100px;
        display: inline-block;

        // justify-content: center;
        // flex: 1;
        /* flex: 1; */
        .texts {
            width: 12rpx;
            font-size: 12rpx;
            line-height: 12rpx;
            // text-align: justify;
            text-align: justify;
            writing-mode: vertical-rl;
            text-orientation: upright;
            writing-mode: vertical-rl;
            text-orientation: upright;
            white-space: nowrap;
        }
    }

    .actives {
        color: white;
        transform: translateZ(0);
        animation: neon-glow 3s cubic-bezier(0.175, 0.885, 0.32, 1.275) infinite;
        /* 延长动画时间 */
        backface-visibility: hidden;
        /* 触发硬件加速 */
    }

    .li-c-b-top {
        width: 20px;
        height: 20px;
        background-color: red;
        border-radius: 50%;
    }
}

@keyframes neon-glow {

    0%,
    100% {
        text-shadow:
            0 0 4px #f0f,
            /* 减少阴影数量 */
            0 0 8px #f0f;
        /* 缩小扩散半径 */
    }

    50% {
        text-shadow:
            0 0 8px #0ff,
            0 0 16px #0ff;
        /* 保持比例缩减 */
    }
}

/* 圆点闪动动画（亮蓝色） */
@keyframes dot-flash {

    0%,
    100% {
        background: #00bfff;
        transform: scale(1);
    }

    50% {
        background: rgb(0 191 255 / 50%);

        /* 透明效果增强动态感 */
        transform: scale(1.5);
    }
}

.arrow {
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
}

.right-arrow {
    position: relative;
    width: 100%;
    height: 20px;
    clip-path: polygon(0 45%,
            /* 左端中间 */
            calc(100% - 15px) 45%,
            /* 右端前部 */
            calc(100% - 15px) 30%,
            /* 顶部尖角 */
            100% 50%,
            /* 右侧尖端 */
            calc(100% - 15px) 70%,
            /* 底部尖角 */
            calc(100% - 15px) 55%,
            /* 右端后部 */
            0 55%
            /* 左端底部 */
        );
    background: #4ecdc4;
    /* 箭头颜色 */
}

// .right-arrow::before {
//     content: '';
//     position: absolute;
//     left: 20rpx;
//     top: 50%;
//     right: 10rpx;
//     height: 2px;
//     background: #fff;
//     border-radius: 2rpx;
//     transform: translateY(-50%);
// }

// .right-arrow::after {
//     content: '';
//     position: absolute;
//     right: 0;
//     top: 50%;
//     width: 10px;
//     height: 10px;
//     border-right: 2px solid #fff;
//     border-top: 2px solid #fff;
//     transform: translateY(-50%) rotate(45deg);
// }</style>